<template>
	<view class="userInfoCard">
		<uni-card>
			<view class="isLogin" v-if="$store.state.isLogin">
				
			<view class="userAvatar" @click="gotoEdit">
				<image :src=userInfo.profile.avatarUrl mode="widthFix"></image>
			</view>
			<view class="userName_vipimage">
				<text>{{userInfo.profile.nickname}}</text>
				<image class="vipImage" src="../../../static/home/vip1.png" mode="widthFix" v-if="!userInfo.profile.vipType"></image>
				<image class="vipImage" src="../../../static/home/vip2.png" mode="widthFix" v-else></image>
			</view>
			<view class="follow_fans_Lv">
				<text>{{userInfo.profile.followeds}} 粉丝</text>
				<text>|</text>
				<text>{{userInfo.profile.follows}} 关注</text>
				<text>|</text>
				<text>Lv.{{userInfo.level}}</text>
			</view>
			</view>
			<view class="noLogin" style="background-color: #ff5500;align-items: center;  color: #000000; height: 80upx; font-size: 40upx;" @click="gotoLogin()" v-else>
				<view >
						<text>登录</text>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		props:{
			userInfo:{type:Object}
			},
		data() {
			return {
			}
		},
		methods: {
			gotoEdit(){
				uni.navigateTo({
					url: '/pages/home/pages/edit',
					fail( res) {
						console.log(res)
						console.log(0)
					}
				})
			},
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/login',
					fail( res) {
						console.log(res)
						console.log(0)
					}
				})
			
			},
		}
	}
</script>

<style scoped>
	.userAvatar image{
		height: 200upx;
		width: 200upx;
		border-radius: 50%;
	}
	
		.userInfoCard{
			text-align: center;
		}
		.vipImage{
			width: 60upx;
			height: 60upx;
		}
		.noLogin view{
			margin-top: 50upx;
		}
</style>
